<template>
  <div class="user">
    <img :src="icon">
    <div class="center">
      <p>{{user}}</p>
      <span>{{city}}</span>
    </div>
    <p class="time">{{time}}</p>
  </div>
</template>

<script>
export default {
  name: "UserTitle",
  components: {},
  props:{
    icon: {
      type: String,
      default: ""      
    },
    user:{
      type: String,
      default: ""      
    },
    time:{
      type: String,
      default: ""      
    },
    city:{
      type: String,
      default: ""      
    },
  }
};
</script>
<style scoped lang="less">
.user {
  overflow: hidden;
  /* display: table-cell; */
  vertical-align: middle;
  padding: 5px 0;
  img {
    width: 2rem;
    float: left;

    position: relative;
    top: 0.2rem;
  }
  .center {
    float: left;
    margin-left: 0.5rem;
    p {
      font-size: 0.8rem;
    }
    span {
      font-size: 0.7rem;
      color: #a8a9a9;
    }
  }
  .time {
    float: right;
    font-size: 0.8rem;
    line-height: 2rem;
  }
}
</style>